<template>
  <div v-loading="loading" class="dashboard-container">
    <organizationData :organ-overview="organOverview" :today-data="todayData" />
    <workTask v-if="Object.keys(todayData).length" :backlog="backlog" :today-data="todayData" />
    <commonMethods />
    <lineTransport :transport-task-list="transportTaskList" />
    <slOrder v-if="Object.keys(orderLineChart).length" :order-line-chart="orderLineChart" />
  </div>
</template>

<script>
import { getWorkspace } from '@/api/dashboard'
import organizationData from './components/organization-data.vue'
import workTask from './components/work-task.vue'
import commonMethods from './components/common-methods.vue'
import lineTransport from './components/line-transport.vue'
import slOrder from './components/sl-order.vue'

export default {
  name: 'Dashboard',
  components: {
    organizationData,
    workTask,
    commonMethods,
    lineTransport,
    slOrder
  },
  data() {
    return {
      organOverview: {},
      todayData: {},
      transportTaskList: [],
      orderLineChart: {},
      backlog: {},
      loading: false
    }
  },
  created() {
    this.initWorkspace()
  },
  methods: {
    async initWorkspace() {
      this.loading = true
      try {
        const res = await getWorkspace()
        // console.log(res)
        this.organOverview = res.organOverview
        this.todayData = res.todayData
        this.transportTaskList = res.transportTaskList
        this.orderLineChart = res.orderLineChart
        this.backlog = res.backlog
      } catch (error) {
        this.loading = false
      }
      this.loading = false
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-container{
  .el-row{
    ::v-deep >.el-col{
      padding: 12px;
      .el-card{
        .el-card__header{
          // padding: 20px;
          border: none;
          span{
           font-size: 16px;
           font-weight: 700;
          }
          i{
           font-size: 14px;
           color: #818693;
           font-style: normal;
          }
          .el-icon-refresh::before{
            margin-right: 8px;
            font-weight: 700;
            font-size: 16px;
            color: #e15536;
          }
        }
        .el-card__body{
          padding: 0 25px 20px;
        }
      }
      .card-height{
        height: 260px;
      }
    }
  }
}

</style>
